<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自动发包/超时处理</title>
    <script type="text/javascript" src="jquery.min.js"></script>
    <style>
        html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
        body {
            background-color: #383838;
            font-family: Arial, sans-serif;
            line-height: 1.5;
            color: #464646;
        }

        .tab-wrapper {
            margin: 10px auto;
            width: 90%;
            height: 60%;
            min-width:600px;
            min-height:400px;
        }

        .tab-menu li {
            position:relative;
            background-color: #fff;
            color:#bcbcbc;
            display: inline-block;
            padding: 20px 40px;
            opacity: 0.8;
            cursor:pointer;
            z-index:0;
        }

        .tab-menu li:hover {
            color:#464646;
        }

        .tab-menu li.active {
            color:#464646;
            opacity: 1;
        }

        .tab-menu li.active:hover {
            color:#464646;
        }

        .tab-content>div {
            background-color: #fff;
            box-sizing:border-box;
            width: 100%;
            height: 100%;
            padding: 50px;
            min-height: 600px;
            max-height: 400px;
            overflow: auto;
            padding:60px;
        }

        .line {
            position:absolute;
            width: 0;
            height: 7px;
            background-color: aqua;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
<div class="tab-wrapper">
    <div style="background-color:#FFFFFF;padding:10px;margin-bottom:15px">
        <div>
            <span>自动发包：</span>
            <input type="checkbox" value="1" name="f1" />五人对战
            <input type="checkbox" value="1" name="f2" />牛牛
            <input type="checkbox" value="1" name="f3" />扫雷
            <input type="checkbox" value="1" name="f4" />二八杠
            <input type="checkbox" value="1" name="f5" />10倍牛
        </div>
    </div>
    <div style="background-color:#FFFFFF;padding:10px;margin-bottom:15px">
        <div>
            <span>自动抢包：</span>
            <input type="checkbox" value="1" name="g1" />五人对战
            <input type="checkbox" value="1" name="g2" />牛牛
            <input type="checkbox" value="1" name="g3" />扫雷
            <input type="checkbox" value="1" name="g4" />二八杠
            <input type="checkbox" value="1" name="g5" />10倍牛
        </div>
    </div>
    <ul class="tab-menu">
        <li class="active">发包</li>
        <li>抢包</li>
        <li>超时</li>
    </ul>
    <div class="tab-content">
        <div id="mbody"></div>
        <div id="mbodygrab"></div>
        <div id="mbodyover"></div>
    </div><!-- //tab-content -->
</div>
<script>
    $(document).ready(function() {

        var $wrapper = $('.tab-wrapper'),
            $allTabs = $wrapper.find('.tab-content > div'),
            $tabMenu = $wrapper.find('.tab-menu li'),
            $line = $('<div class="line"></div>').appendTo($tabMenu);

        $allTabs.not(':first-of-type').hide();
        $tabMenu.filter(':first-of-type').find(':first').width('100%')

        $tabMenu.each(function(i) {
            $(this).attr('data-tab', 'tab'+i);
        });

        $allTabs.each(function(i) {
            $(this).attr('data-tab', 'tab'+i);
        });

        $tabMenu.on('click', function() {

            var dataTab = $(this).data('tab'),
                $getWrapper = $(this).closest($wrapper);

            $getWrapper.find($tabMenu).removeClass('active');
            $(this).addClass('active');

            $getWrapper.find('.line').width(0);
            $(this).find($line).animate({'width':'100%'}, 'fast');
            $getWrapper.find($allTabs).hide();
            $getWrapper.find($allTabs).filter('[data-tab='+dataTab+']').show();
        });

    });

    var weburl = 'http://am.redenvelopes.com/';
    // 每10秒处理一次超时的红包
    function autogameover()
    {
        $.ajax({
            url : weburl + "/autogames/autogameover",
            success: function (data) {
                var obj = eval('('+data+')');
                $('#mbodyover').html(obj.msg + '<br />' + $('#mbodyover').html());

            },
            error:function(XMLHttpRequest, textStatus, errorThrown){
                $('#mbodyover').html(textStatus + '<br />' + $('#mbodyover').html());
            }
        });
    }
    window.setInterval(autogameover,5000);

    // 每10秒检测一次房间是否有待抢的红包，如果没有即自动发包
    function autoplaygame() {
        for(var i=1;i<=5;i++) {
            var obj = $("input[name=f" + i + "]").is(':checked');
            if (obj) {
                $.ajax({
                    url: weburl + "/autogames/autosendgame?gameid=" + i,
                    timeout: 30000,
                    success: function (data) {
                        console.log(JSON.stringify(data));
                        var obj = eval('(' + data + ')');
                        $('#mbody').html(obj.msg + '<br />' + $('#mbody').html());

                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        $('#mbody').html(textStatus + '<br />' + $('#mbody').html());
                    }
                });
            }
        }
    }
    window.setInterval(autoplaygame,5000);


    //}
    function timesRandom() {
        // 3000-1000=2000
        Math.random()*2000
        var num = Math.random()*2000 + 1000;
        num = parseInt(num, 10);
        // console.log('将在'+parseInt(num/1000)+'秒后开抢');
        return num;
    }
    var timesdelay = timesRandom();
    var game_1,game_2,game_3,game_4,game_5;
    function autograb_game_1() {
        setTimeout(function () {
            var obj = $("input[name=g1]").is(':checked');
            if (obj) {
                $.ajax({
                    url: weburl + "/autogames/autograb?gameid=1",
                    timeout: 30000,
                    success: function (data) {
                        console.log(data);
                        var obj = eval('(' + data + ')');
                        $('#mbodygrab').html(obj.msg + '<br />' + $('#mbodygrab').html());
                        console.log(obj.settlement);
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        $('#mbodygrab').html(textStatus + '<br />' + $('#mbodygrab').html());
                    }
                });
            }
            //console.log('1、下次准备开始抢红包');
            clearInterval(game_1);
            game_1 = setInterval(autograb_game_1, timesRandom());
        });
    }
    function autograb_game_2() {
        setTimeout(function () {
            var obj = $("input[name=g2]").is(':checked');
            if (obj) {
                $.ajax({
                    url: weburl + "/autogames/autograb?gameid=2",
                    timeout: 30000,
                    success: function (data) {
                        console.log(data);
                        var obj = eval('(' + data + ')');
                        $('#mbodygrab').html(obj.msg + '<br />' + $('#mbodygrab').html());
                        console.log(obj.settlement);
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        $('#mbodygrab').html(textStatus + '<br />' + $('#mbodygrab').html());
                    }
                });
            }
            //console.log('2、下次准备开始抢红包');
            clearInterval(game_2);
            game_2 = setInterval(autograb_game_2, timesRandom());
        });
    }
    function autograb_game_3() {
        setTimeout(function () {
            var obj = $("input[name=g3]").is(':checked');
            if (obj) {
                $.ajax({
                    url: weburl + "/autogames/autograb?gameid=3",
                    timeout: 30000,
                    success: function (data) {
                        console.log(data);
                        var obj = eval('(' + data + ')');
                        $('#mbodygrab').html(obj.msg + '<br />' + $('#mbodygrab').html());
                        console.log(obj.settlement);
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        $('#mbodygrab').html(textStatus + '<br />' + $('#mbodygrab').html());
                    }
                });
            }
            // console.log('3、下次准备开始抢红包');
            clearInterval(game_3);
            game_3 = setInterval(autograb_game_3, timesRandom());
        });
    }
    function autograb_game_4() {
        setTimeout(function () {
            var obj = $("input[name=g4]").is(':checked');
            if (obj) {
                $.ajax({
                    url: weburl + "/autogames/autograb?gameid=4",
                    timeout: 30000,
                    success: function (data) {
                        console.log(data);
                        var obj = eval('(' + data + ')');
                        $('#mbodygrab').html(obj.msg + '<br />' + $('#mbodygrab').html());
                        console.log(obj.settlement);
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        $('#mbodygrab').html(textStatus + '<br />' + $('#mbodygrab').html());
                    }
                });
            }
            //console.log('4、下次准备开始抢红包');
            clearInterval(game_4);
            game_4 = setInterval(autograb_game_4, timesRandom());
        });
    }
    function autograb_game_5() {
        setTimeout(function () {
            var obj = $("input[name=g5]").is(':checked');
            if (obj) {
                $.ajax({
                    url: weburl + "/autogames/autograb?gameid=5",
                    timeout: 30000,
                    success: function (data) {
                        console.log(data);
                        var obj = eval('(' + data + ')');
                        $('#mbodygrab').html(obj.msg + '<br />' + $('#mbodygrab').html());
                        console.log(obj.settlement);
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        $('#mbodygrab').html(textStatus + '<br />' + $('#mbodygrab').html());
                    }
                });
            }
            //console.log('5、下次准备开始抢红包');
            clearInterval(game_5);
            game_5 = setInterval(autograb_game_5, timesRandom());
        });
    }
    game_1 = setInterval(autograb_game_1, timesRandom());
    game_2 = setInterval(autograb_game_2, timesRandom());
    game_3 = setInterval(autograb_game_3, timesRandom());
    game_4 = setInterval(autograb_game_4, timesRandom());
    game_5 = setInterval(autograb_game_5, timesRandom());

    // 清空内容
    setInterval(function(){
       $('#mbody').html('');
       $('#mbodygrab').html('');
       $('#mbodyover').html('');
    },30000);
</script>
</body>
</html>